<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>Dynamic Dimensions Example - jQuery in Action, 3rd edition</title>
      <link rel="stylesheet" href="../css/main.css"/>
      <style>
         #test-subject
         {
            background-color: #FFFFCC;
            border: 2px ridge maroon;
            padding: 0.5em;
         }
      </style>
   </head>
   <body>
      <div id="test-subject">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
         Aliquam eget enim id neque aliquet porttitor. Suspendisse
         nisl enim, nonummy ac, nonummy ut, dignissim ac, justo.
         Aenean imperdiet semper nibh. Vivamus ligula. In in ipsum
         sed neque vehicula rhoncus. Nam faucibus pharetra nisi.
         Integer at metus. Suspendisse potenti. Vestibulum ante
         ipsum primis in faucibus orci luctus et ultrices posuere
         cubilia Curae; Proin quis eros at metus pretium elementum.
      </div>
      <div id="display"></div>

      <script src="../js/jquery-1.11.3.min.js"></script>
      <script>
         function displayDimensions() {
            $('#display').html(
               $('#test-subject').width() + 'x' + $('#test-subject').height()
            );
         }

         $(window).resize(displayDimensions);
         displayDimensions();
      </script>
   </body>
</html>
